<script setup>
import Menu from "@/components/common/header/components/menu.vue";
import {useWebInfo} from "@/store/webinfo.js";
import nullMixin from "@/mixins/null.js";
import {useRoute} from "vue-router";

const {nameIsNull} = nullMixin();
const webInfoStore = useWebInfo();
const {webInfo} = webInfoStore;
const route = useRoute();
const path = ref();
watch(route, () => {
  path.value = route.path;
}, {
  deep: true,
  immediate: true,
});
const hoverEnter = ref(false);

</script>

<template>
  <header class="myBetween"
          @mouseenter="hoverEnter = true"
          @mouseleave="hoverEnter = false"
          :class="[{ hoverEnter: (hoverEnter || path !== '/') }]">
    <div style="cursor: pointer; margin-left: 30px">
      <router-link style="color: var(--white)" to="/">
        <h2>{{ nameIsNull(webInfo.webName) }}</h2>
      </router-link>
    </div>
    <Menu></Menu>
  </header>
</template>

<style scoped lang="less">
header {
  position: fixed;
  width: 100%;
  height: 60px;
  color: var(--white);
  user-select: none;
  transition: all .3s ease-in-out;
  z-index: 100;

  &.hoverEnter {
    background: var(--translucent);
    box-shadow: 0 1px 3px 0 rgba(0, 34, 77, 0.05);
  }
}
</style>